<template>
    <div>
        <el-form :model="paramsFormData" :rules="rules" ref="ruleForm" :validate-on-rule-change="false">
            <el-form-item v-for="(value,key) in paramsFormData" :prop="key" :key="key"
                          :label="paramsFormDataName[key]">
                <!--输入输出的string-->
                <div v-if="parseInt(formData[key].in)>-1||parseInt(formData[key].out)>-1">
                    <span>
                        <el-input ref="formInput" v-model="paramsFormData[key]"
                                  :placeholder="'请输入'+paramsFormDataDescribe[key]"
                                  style="float: left;margin-left: 1%;width: 77%;"></el-input>
                    </span>
                        <span style="float: right;margin-right: 3%" id="icon">
                         <n3-icon type="folder" @click.native="openPathSelector" size="large"
                                  v-if="parseInt(formData[key].out)>-1"
                                  id={key}>
                         </n3-icon>
                         <n3-icon type="folder-open" size="large" @click.native="openFilePosition"
                                  v-if="parseInt(formData[key].in)>-1">
                         </n3-icon>
                    </span>
                </div>
                <!--有选项的string-->
                <div v-if="formData[key].option !==undefined">
                <span>
                    <el-select v-if="formData[key].option!==undefined" v-model="paramsFormData[key]"
                               :placeholder="'请选择'+paramsFormDataName[key]"
                               style="width: 77%;margin-left: 1%" clearable>
                        <!--可以选择的option-->
                          <el-option
                                  v-for="item in paramsFormDataOption[key]"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                          </el-option>
                     </el-select>
                </span>
                </div>
                <!--普通的string-->
                <div v-if="formData[key].in==undefined&&formData[key].option ==undefined&&formData[key].out==undefined">
                <span>
                    <el-input ref="formInput" v-model="paramsFormData[key]"
                              :placeholder="'请输入'+paramsFormDataDescribe[key]"
                              style="float: left;margin-left: 1%;width: 77%;"></el-input>
                </span>
                </div>
            </el-form-item>
        </el-form>
        <pathChooseDialog @getPath="path"></pathChooseDialog>
        <fileChooseDialog1 @getFile="file"></fileChooseDialog1>
    </div>
</template>

<script>
    import pathChooseDialog from '../analyzePlat/pathChooseDioalog'
    import fileChooseDialog1 from '../analyzePlat/fileChooseDialog1'

    export default {
        name: "modelForm",
        components: {
            pathChooseDialog,
            fileChooseDialog1
        },
        data() {
            return {
                //规则
                rules: {},
                //最终拼接成的参数
                formDataParams: [],
                //form表单的model
                paramsFormData: {},
                paramsFormDataName: {},
                paramsFormDataDescribe: {},
                paramsFormDataOption: {},
                dialogVisible: false,
                matchPathStr: '',
                matchFileStr: ''
            }
        },
        props: {
            formData: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        methods: {
            //由于是循环得到的，所以需要强制刷新
            // this.$forceUpdate();
            openFilePosition(e) {
                this.$Bus.$emit('fileVisible', true);
                let string = $(e.target).parent().parent()[0].innerHTML;
                this.matchFileStr = string.match(/请输入([\s\S]*)" /)[1];
            },
            openPathSelector(e) {
                this.$Bus.$emit('fileDialogVisible', {
                    fileDialogVisible: true,
                });
                let Str = $(e.target).parent().parent()[0].innerHTML;

                this.matchPathStr = Str.match(/请输入([\s\S]*)"/g)[0];
                this.matchPathStr = this.matchPathStr.substring(0, this.matchPathStr.indexOf("\""));
            },
            path(data) {
                for (let i = 0; i < this.formData.length; i++) {
                    if (this.matchPathStr.indexOf(this.formData[i].description) > -1) {
                        this.paramsFormData[i] = data;
                        break;
                    }
                }
            },
            file(data) {

                for (let i = 0; i < this.formData.length; i++) {
                    if (this.matchFileStr.indexOf(this.formData[i].description) > -1) {
                        if (data.id !== undefined) {
                            this.paramsFormData[i] = data.id;
                        } else {
                            this.paramsFormData[i] = data;
                        }
                        break;
                    }
                }
            },
            confirm() {
                let modelForm = {};
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        let param = {};
                        param.jobname = this.paramsFormData[0];
                        let modelParams = [];
                        for (let i = 1; i < Object.keys(this.paramsFormData).length; i++) {
                            modelParams.push(this.paramsFormData[i] + "");
                        }
                        param.params = modelParams;
                        console.log(param);
                        modelForm.pass = true;
                        modelForm.param = param;
                    } else {
                        console.log('error submit!!');
                        modelForm.pass = false;
                        modelForm.param = [];
                        return false;
                    }
                });
                this.$Bus.$emit('modelForm', modelForm);
            },
            reset() {
                this.$refs["ruleForm"].resetFields();
            },

        },
        watch: {
            formData: {
                handler: function (newValue, oldValue) {
                    this.rules = {};
                    this.paramsFormData = {};
                    //拼接参数名字和描述
                    for (let i = 0; i < newValue.length; i++) {
                        //事先设置一下表单
                        let val = newValue[i].default != null ? newValue[i].default : "";
                        this.$set(this.paramsFormData, i, val);
                        //拼接form的model
                        // this.paramsFormData[i] = val;
                        this.paramsFormDataName[i] = newValue[i].name;
                        this.paramsFormDataDescribe[i] = newValue[i].description;
                        //拼接选项
                        if (newValue[i].option !== undefined) {
                            let optionArr = newValue[i].option.split(",");
                            let options = [];
                            for (let j = 0; j < optionArr.length; j++) {
                                let option = {};
                                option.value = optionArr[j];
                                option.label = optionArr[j];
                                options.push(option);
                            }
                            this.paramsFormDataOption[i] = options;
                        }
                        this.rules[i] = [];
                        //对于特定rule的提醒
                        let ruleMessage = {};
                        //必须的rule
                        let ruleRequire = {};
                        ruleRequire["message"] = '请输入' + newValue[i].name;
                        ruleMessage["trigger"] = 'blur';
                        ruleRequire["trigger"] = 'blur';
                        ruleRequire["required"] = true;
                        if (newValue[i].datatype === 'Int') {
                            ruleRequire["type"] = 'number';
                            ruleMessage["message"] = '参数必须为整数值';
                            // ruleRequire["required"] = true;
                        }
                        if (newValue[i].option !== undefined) {
                            ruleRequire["trigger"] = 'change';
                            ruleMessage["message"] = '请在选项中选择';
                        }
                        this.rules[i][0] = ruleMessage;
                        this.rules[i][1] = ruleRequire;
                    }
                }
            }
        }
        ,
        mounted() {
        }
        ,
        created() {
        }
    }
</script>

<style>

    #icon:hover {
        color: #409EFF;
    }

    .output input {
        font-size: 0;
        position: absolute;
        left: -999px;
    }

    .output label {
        left: 0;
    }

    .el-form-item__label {
        min-width: 123px;
        text-align: center;
    }


    input[type=file] {
        display: none;
    }
</style>